<script setup lang="ts">
    // const userStore = useUserStore()

    // const { token } = userStore
    import { ref } from "vue"
    // import { useIpcRenderer } from "@vueuse/electron"

    const loginForm = ref({
        username: "",
        password: "",
        isSelected: false
    })

    const loginRules = {
       
    }

    // const ipcRenderer = useIpcRenderer();
    const openNewWin = () => {
        window.electron.ipcRenderer.send("window-new", {
            id: 'HOME',
            isMain: true,
            route: "/home",
            width: 1632,
            height: 924,
            backgroundColor: "rgba(244, 249, 253, 1)",
        });
    };
    const pinUp = ()=>{
        window.electron.ipcRenderer.send('pinUp',1)
    }
    // 最小化窗口
    const minimizeWin = ()=>{
        window.electron.ipcRenderer.send('window-minimize','HOME')
    }
    // 最大化窗口
    const maximizeWin = ()=>{
        window.electron.ipcRenderer.send('window-maximize','HOME')
    }
    // 关闭窗口
    const closeWin = ()=>{
        window.electron.ipcRenderer.send('window-close','HOME')
    }
</script>

<template>
    <div class="login">
        <div class="norem-header">
            <div class="left-header"></div>
            <div class="right-header">
                <div class="btn-item" @click="closeWin">
                    <el-icon class="icon close-icon" size="14px"><CloseBold /></el-icon>
                </div>
                <div class="btn-item" @click="maximizeWin">
                    <el-icon class="icon copy-icon" size="14px"><CopyDocument /></el-icon>
                </div>
                <div class="btn-item" @click="minimizeWin">
                    <el-icon class="icon select-icon" size="14px"><SemiSelect /></el-icon>
                </div>
            </div>
        </div>
        <div class="left">
            <div class="logo"><div class="box" @click="pinUp"></div><p>Wookroom</p></div>
            <p class="desc">Your place to work Plan. Create. Control.</p>
            <img class="bg-img" src="@renderer/assets/images/sign-in.jpg" style="width: 100%;" alt="">
        </div>
        <div class="right">
            <div class="title">Sign In to Wookroom</div>
            <el-form class="login-form" ref="loginForm" :style="{marginTop: '20px'}" :model="loginForm" :rules="loginRules">
                <el-form-item prop="username" label="Email Address" :style="{flexDirection: 'column', alignItems: 'flex-start'}">
                    <el-input 
                        :input-style="{width: '250px', height: '30px'}"
                        v-model="loginForm.username" 
                        placeholder="youremail@gmail.com" />
                </el-form-item>
                <el-form-item prop="username" label="password" :style="{flexDirection: 'column', alignItems: 'flex-start'}"> 
                    <el-input
                        :input-style="{width: '250px', height: '30px'}"
                        v-model="loginForm.username"
                        placeholder="• • • • • • • •" />
                </el-form-item>
                <el-form-item prop="isSelected">
                    <div class="remember">
                        <el-checkbox v-model="loginForm.isSelected">Remember me</el-checkbox>
                        <a href="#">Forgot password?</a>
                    </div>
                </el-form-item>
                <el-form-item :style="{justifyContent: 'center'}">
                    <div class="login-btn">
                        <el-button type="primary" @click="openNewWin" :style="{borderRadius: '6px',height: '34px', padding: '0 30px'}">Sign In<el-icon :style="{marginLeft: '5px'}"><Right /></el-icon></el-button>
                        <a href="#">Don’t have an account?</a>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .login{
        display: flex;
        height: 100%;
        // -webkit-app-region: drag;
        .norem-header{
            position: fixed;
            top: 0;
            left: 0;
            height: 30px;
            width: 100%;
            // background-color: red;
            -webkit-app-region: drag;
            display: flex;
            justify-content: space-between;
            .left-header{
                flex: 1;
            }
            .right-header{
                flex: 1;
                display: flex;
                flex-direction: row-reverse;
                .icon{
                    -webkit-app-region: no-drag;
                    height: 100%;
                    width: 40px;
                }
                .close-icon{

                }
                .copy-icon{

                }
                .select-icon{

                }
            }
        }
        .left{
            background-color: rgba(63, 140, 255, 1);
            flex: 1;
            color: #FFFFFF;
            display: flex;
            flex-direction: column;
            // justify-content: center;
            align-items: center;
            .logo{
                display: flex;
                align-items: center;
                font-size: 24px;
                width: 400px;
                margin-top: 50px;
                .box{
                    width: 40px;
                    height: 40px;
                    border-radius: 10px;
                    background-color: #FFFFFF;
                    margin-right: 20px;
                }
            }
            .desc{
                width: 400px;
                font-size: 36px;
                margin-top: 40px;
            }
            .bg-img{
                margin: 0 20px;
                margin-top: 30px;
            }
        }
        .right{
            background-color: rgba(255, 255, 255, 1);
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            // padding-top: 115px;
            box-sizing: border-box;
            .title{
                font-size: 18px;
                font-weight: 700;
            }
            .login-form{
                :deep(.el-input__wrapper){
                    border-radius: 8px;
                }
                .remember{
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    a{
                        color: rgba(125, 133, 146, 1);
                        text-decoration: none;
                    }
                }
                .login-btn{
                    flex: 1;
                    flex-direction: column;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    a{
                        color: rgba(63, 140, 255, 1);
                        text-decoration: none;
                        margin-top: 8px;
                    }
                }
            }
        }
    }
</style>